<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>配件详情页</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="1200">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <link rel="stylesheet" href="/dist/plugins/fixedTable/fixed-table.css"/>
    <style>
        .table > tbody > tr > td {
            height: 30px;
            max-height: 44px;
            padding: 0 2px;
        }

        td {
            position: relative;
        }

        .table .td-value span {
            line-height: 22px;
        }

        .saveModle .top {
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            padding-left: 7px;
            border-bottom: 1px solid #cfcfcf;
            background: #fff;
        }

        .saveModle .top .title {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            float: left;
            background: #fff;
        }

        .saveModle .top .btn {
            font-size: 20px;
            width: 34px;
            height: 22px;
            line-height: 12px;
            display: inline-block;
            float: right;
        }

        .saveModle .top .btn:hover {
            color: red;
        }

        .saveModle .saveBtn {
            margin: 0 auto;
            margin-top: 35px;
            display: block;

        }

        .lineOne span {
            overflow: hidden;
            text-overflow: ellipsis;
            color: #2a8cec !important;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            /* max-height: 30px; */
            line-height: 24px;
            height: 24px;
        }

        p {
            display: inline-block;
            margin-bottom: 0px;
            line-height: 25px;
            padding-right: 15px;
            color: #228bee;
            font-size: 14px;
        }

        .td-value span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            color: #2a8cec !important;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            /* max-height: 30px; */
            line-height: 24px;
            height: 24px;
        }

        span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            color: #2a8cec !important;
            /*display: -webkit-box;*/
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 34px;
        }

        .td-value {
            text-align: left !important;
            vertical-align: middle;
            word-wrap: break-word;
            color: black !important;
            color: #2a8cec !important;
        }

        td {
            height: 47.78px;
        }

        .td-value span {
            display: inline-block;
            overflow: hidden;
            padding-left: 0.06rem;
            word-wrap: break-word;
            color: black !important;
        }


        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .fixed-table_body tr td {
            border-right: none;
            font-size: 12px;
            text-align: center;
        }

        .fixed-table_header tr th {
            border-right: none;
            background: yellow;
            font-weight: normal;
            font-size: 12px;
        }

        .nav > li > a {
            padding: 10px 10px;
        }


        .nav-tabs-custom > .nav-tabs > li.active {
            color: #2a8cec;
        }

        .nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
            background: #fff;
            color: #2a8cec;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }


        .nav-tabs-custom > .nav-tabs {
            /*border-bottom-color: #fff;*/
        }

        .model-picker-dropdown {
            position: absolute;
            width: 315px;
            left: -9999px;
            top: -9999px;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            z-index: 999999;
            display: none;
            min-width: 200px;
            margin-bottom: 20px;
            margin-top: 5px;
        }

        .model-select {
            font-size: 16px;
        }

        .model-select dl {
            line-height: 2;
            clear: both;
            padding: 3px 0;
            margin: 0;
            max-height: 200px;
            overflow-y: scroll;
        }

        .model-select-content {
            width: 100%;
            min-height: 50px;
            background-color: #fff;
            padding: 5px 5px;
        }

        .model-select a:hover,
        .model-select a:focus {
            background-color: #f1f8ff;
            border-radius: 2px;
            color: #46A4FF;
        }

        .model-select a.active {
            background-color: #46A4FF;
            color: #fff;
            border-radius: 2px;
        }

        .td-value select {
            color: #2a8cec;
            font-size: 12px;
            padding-left: 1px;
        }

        .td-value span {
            padding-left: 6px;
        }

        textarea {
            height: 56px;
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            resize: none;
            padding-left: 20px;
            padding-top: 0px !important;
        }

        .textareaSpan {
            max-height: 56px;
            line-height: 18px !important;
            overflow: hidden !important;
            text-overflow: ellipsis;
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }

        .content {
            padding: 0px 8px;
        }

        .biTian {
            position: absolute;
            color: red;
            margin-left: -10px;
            margin-top: 3px;
        }

        label {
            font-weight: normal;
            margin-bottom: 0px;
        }

        table {
            table-layout: fixed;
        }

        .userName {
            text-align: justify !important;
            display: inline-block !important;
            overflow: hidden !important;
            vertical-align: middle !important;
            height: 24px !important;
            line-height: 24px !important;
            width: 46px !important;
        }

        .userName:after {
            content: " ";
            display: inline-block;
            width: 100%;
        }


        .checkBoxToRadio {
            padding-top: 0.5px;
            background-color: #DEDEDE;
            border: 1px solid #a8a8a8;
            width: 12px;
            height: 12px;
            line-height: 8px;
            text-align: center;
            position: absolute;
            top: 8px;
            border-radius: 3px;
            color: #424242;
            font-weight: bold;
            font-size: 10px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<section class="content iframeH" id="app" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <div class="model-picker-dropdown">
        <div class="model-select-wrap">
            <div class="model-select-tab">
                <a class="active" data-count="type">省</a>
                <a class="" data-count="brand">市</a>
                <a data-count="model" class="">县</a>
            </div>
            <div class="model-select-content">
                <div class="model-select type" data-count="type" style="display: block;">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="item in itemsType">{{item.name}}</a>
                    </dl>
                </div>
                <div class="model-select brand" data-count="province">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="(item,i) in itemsBran">{{item.name}}</a>
                    </dl>
                </div>
                <div class="model-select model" data-count="model">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="(item,i) in itemsMod">{{item.name}}</a>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <div class="center" style="overflow: auto; height: 100%;" id="scrollDiv">
        <div id="progress" class="wyui-progress"></div>
        <template v-if="type != 'other'">
            <table class="table table-detail table-bordered text-center" style="table-layout: fixed;">
                <tr>
                    <td colspan="8" class="tableTitle">基本信息</td>
                </tr>
                <tr>
                    <td class="td-title">业务编号</td>
                    <td class="td-value">
                        <span v-if="businessInfo.business.businessNo" class="lineOne"> {{businessInfo.business.businessNo}}</span>
                        <span v-else class="lineOne">保存后自动生成</span>
                    </td>
                    <td class="td-title">登记时间</td>
                    <td class="td-value">
                        <span v-if="businessInfo.business.createTime"> {{businessInfo.business.createTime}}</span>
                        <span v-else>保存后自动生成</span>
                    </td>
                    <td class="td-title">状态</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <select v-model="businessInfo.business.status" class="form-control">
                                <option value="" selected></option>
                                <option v-for="s in item.status" v-bind:value="s.key">{{s.value}}</option>
                            </select>
                        </template>
                        <template v-else>
                            <span>{{getServeConsultStatus(businessInfo.business.status)}}</span>
                        </template>
                    </td>
                    <td class="td-title">登记人姓名</td>
                    <td class="td-value">
                        <span v-if=" businessInfo.business.createUserName">{{ businessInfo.business.createUserName}}</span>
                        <span v-else>{{getCurrentUser().name}}</span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title">400咨询单号</td>
                    <td class="td-value">
                        <span class="lineOne"> {{ businessInfo.business.serialNo}}</span>
                    </td>
                    <td colspan="6"></td>
                </tr>
                <tr>
                    <td colspan="8" class="tableTitle">客户信息</td>
                </tr>
                <tr>
                    <td class="td-title">来电人姓名</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input placeholder="请输入来电人姓名" type="text" id="callerName"
                                   v-model=" businessInfo.business.callerName"/>
                        </template>
                        <template v-else>
                            <span>     {{ businessInfo.business.callerName}}</span>
                        </template>
                    </td>
                    <td class="td-title">来电号码</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input placeholder="请输入来电号码" type="text" id="callerTel"
                                   v-model=" businessInfo.business.callerTel"/>
                        </template>
                        <template v-else>
                            <span> {{ businessInfo.business.callerTel}}</span>
                        </template>
                    </td>
                    <td class="td-title">客户姓名</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input id="customerName" placeholder="请输入客户姓名" type="text" id="customerName"
                                   v-model=" businessInfo.business.customerName"/>
                        </template>
                        <template v-else>
                            <span>     {{ businessInfo.business.customerName}}</span>
                        </template>
                    </td>
                    <td class="td-title">客户电话</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input placeholder="请输入客户电话" type="text"
                                   v-model=" businessInfo.business.customerTel"/>
                        </template>
                        <template v-else>
                            <span>        {{ businessInfo.business.customerTel}}</span>
                        </template>
                    </td>
                </tr>
                <tr>
                    <td class="td-title">来电人类型</td>
                    <td colspan="3" class="td-value">
                        <template v-if="pageType == 'edit'">
                            <select v-model=" businessInfo.business.callerType" class="form-control">
                                <option value="" selected></option>
                                <option v-for="s in item.callerType" v-bind:value="s.key">{{s.value}}</option>
                            </select>
                        </template>
                        <template v-else>
                            <span>{{ getCallerType(businessInfo.business.callerType)}}</span>
                        </template>
                    </td>
                    <td class="td-title">所属区域</td>
                    <td colspan="3" class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input class="td-value selectModel" placeholder="请输入所属区域"
                                   v-model="businessInfo.business.customerArea"
                                   type="text"/>
                        </template>
                        <template v-else>
                            <span>{{ businessInfo.business.customerArea}}</span>
                        </template>
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="tableTitle">设备信息</td>
                </tr>
                <tr>
                    <td class="td-title">设备品牌</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <select v-model="businessInfo.business.deviceBrandId"
                                    @change="getDeviceType(businessInfo.business.deviceBrandId,'change')"
                                    class="form-control">
                                <option value="" selected></option>
                                <option v-for="d in item.deviceBrand" v-bind:value="d.id">{{d.name}}</option>
                            </select>
                        </template>
                        <template v-else>
                            <span>  {{businessInfo.business.deviceBrand}} </span>
                        </template>
                    </td>
                    <td class="td-title">设备类型</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <select v-model="businessInfo.business.deviceTypeId" @change="getDeviceModel('change')"
                                    class="form-control">
                                <option value="" selected></option>
                                <option v-for="d in item.deviceType" v-bind:value="d.id">{{d.name}}</option>
                            </select>
                        </template>
                        <template v-else>
                            <span> {{businessInfo.business.deviceType}} </span>
                        </template>
                    </td>
                    <td class="td-title">设备型号</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <select v-model="businessInfo.business.deviceModelId" class="form-control">
                                <option value="" selected></option>
                                <option v-for="d in item.deviceModel" v-bind:value="d.id">
                                    {{d.modelName}}
                                </option>
                            </select>
                        </template>
                        <template v-else>
                            <span>  {{businessInfo.business.deviceModel}} </span>
                        </template>
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="tableTitle">业务信息</td>
                </tr>
                <tr>
                    <td class="td-title"><i class="biTian">*</i>业务类别</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <select v-model="businessInfo.business.businessType" class="form-control">
                                <option value="" selected></option>
                                <option v-for="d in item.serveTypeOfService" v-bind:value="d.key">
                                    {{d.value}}
                                </option>
                            </select>
                        </template>
                        <template v-else>
                            <span>     {{getServeTypeOfService(businessInfo.business.businessType)}} </span>
                        </template>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" style="height: 60px;"><i class="biTian">*</i>内容详情</td>
                    <td colspan="7" class="td-value" style="width: 60px;padding: 0px;">
                                <textarea v-model="businessInfo.business.businessContent" v-if="pageType=='edit'"
                                          style="padding-top: 0px !important;  color: #2a8cec !important;line-height: 20px;">
                             </textarea>
                        <span v-else class="textareaSpan lineOne">   {{businessInfo.business.businessContent}} </span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" style="height: 60px;">解决办法</td>
                    <td colspan="7" class="td-value" style="width: 60px;">
                                <textarea v-model="businessInfo.business.solveWay" v-if="pageType=='edit'"
                                          style="padding-top: 0px !important;  color: #2a8cec !important;line-height: 20px;">
                                <span v-else class="textareaSpan lineOne">   {{businessInfo.business.solveWay}} </span>
                                </textarea>
                    </td>
                </tr>
                <template v-if="type == 'accessoriesConsultation'">
                    <tr>
                        <td class="td-title" style="height: 60px;">备注</td>
                        <td colspan="7" class="td-value" style="width: 60px;">
                                 <textarea v-if="pageType == 'edit'" v-model="businessInfo.business.remark"
                                           style="padding-top: 0px !important;  color: #2a8cec !important;line-height: 20px;">
                                 </textarea>
                            <span v-else
                                  class="textareaSpan lineOne">{{businessInfo.business.remark}} </span>
                        </td>
                    </tr>
                </template>
                <tr>
                    <td colspan="8" class="tableTitle">受理人信息</td>
                </tr>
                <tr>
                    <template v-if="type == 'machineConsultation'">
                        <td class="td-title"><i class="biTian">*</i>受理人部门</td>
                        <td class="td-value">
                            <template v-if="pageType == 'edit'">
                                <select v-model=" businessInfo.business.acceptDepartId" class="form-control">
                                    <option value="" selected></option>
                                    <option v-for="d in item.acceptDepart" v-bind:value="d.departId">
                                        {{d.departName}}({{d.companyName}})
                                    </option>
                                </select>
                            </template>
                            <template v-else>
                                <span>      {{ businessInfo.business.acceptDepart}} </span>
                            </template>
                        </td>
                    </template>
                    <template v-else-if="type == 'accessoriesConsultation'">
                        <td class="td-title"><i class="biTian">*</i>指派服务站</td>
                        <td class="td-value">
                            <template v-if="pageType == 'edit'">
                                <select v-model=" businessInfo.business.serverStationId"
                                        @change="getAcceptName('change')"
                                        class="form-control">
                                    <option value="" selected></option>
                                    <option v-for="d in item.serviceStation" v-bind:value="d.stationId">
                                        {{d.stationName}}
                                    </option>
                                </select>
                            </template>
                            <template v-else>
                                <span v-if="item.acceptName !='' ">{{ item.acceptName[0].stationName}} </span>
                            </template>
                        </td>
                    </template>
                    <template v-if="type == 'machineConsultation'">
                        <td class="td-title"><i class="biTian">*</i>受理责任人</td>
                        <td class="td-value">
                            <template v-if="pageType == 'edit'">
                                <input id="acceptName"
                                       placeholder="受理责任人姓名" type="text"
                                       v-model=" businessInfo.business.acceptName"
                                       :departId="businessInfo.business.acceptDepartId"/>
                            </template>
                            <template v-else>
                                <span>  {{ businessInfo.business.acceptName}} </span>
                            </template>
                        </td>
                    </template>
                    <template v-if="type  == 'accessoriesConsultation'">
                        <td class="td-title"><i class="biTian">*</i>受理责任人</td>
                        <td class="td-value">
                            <template v-if="pageType == 'edit'">
                            <select  v-model="businessInfo.business.acceptId"
                                    class="form-control"
                                    @change="getTelById('change')">
                                <option value="" selected="selected"></option>
                                <option v-for="d in item.acceptName" v-bind:value="d.acceptorId">
                                    {{d.acceptorName}}
                                </option>
                            </select>
                            </template>
                            <template v-else>
                                <span>  {{ businessInfo.business.acceptName}}  </span>
                            </template>
                        </td>
                    </template>
                    <td class="td-title"><i class="biTian">*</i>手机号码</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input placeholder="请输入手机号码" type="text"
                                   v-model=" businessInfo.business.acceptTel"/>
                        </template>
                        <template v-else>
                            <span>    {{ businessInfo.business.acceptTel}} </span>
                        </template>
                    </td>
                    <td class="td-title">发送短信</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <select v-model=" businessInfo.business.briefMes" class="form-control">
                                <option value="" selected></option>
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </template>
                        <template v-else>
                            <span>  {{businessInfo.business.briefMes == 1?'是':'否'}}</span>
                        </template>
                    </td>
                </tr>
            </table>
        </template>
        <template v-else>
            <table class="table table-detail table-bordered text-center" style="table-layout: fixed;">
                <tr>
                    <td colspan="8" class="tableTitle">基本信息</td>
                </tr>
                <tr>
                    <td class="td-title">业务编号</td>
                    <td class="td-value">
                        <span v-if="businessInfo.business.businessNo" class="lineOne"> {{businessInfo.business.businessNo}}</span>
                        <span v-else class="lineOne">保存后自动生成</span>
                    </td>
                    <td class="td-title">登记人姓名</td>
                    <td class="td-value">
                        <span v-if=" businessInfo.business.createUserName">{{ businessInfo.business.createUserName}}</span>
                        <span v-else>{{getCurrentUser().name}}</span>
                    </td>
                    <td class="td-title">来电类型</td>
                    <td class="td-value">
                        <span>    其他 </span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title">来电号码</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input placeholder="请输入来电号码" type="text" id="callerTel"
                                   v-model=" businessInfo.business.callerTel"/>
                        </template>
                        <template v-else>
                            <span>      {{ businessInfo.business.callerTel}} </span>
                        </template>
                    </td>
                    <td class="td-title">来电人姓名</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input placeholder="请输入来电人姓名" type="text" id="callerName"
                                   v-model=" businessInfo.business.callerName"/>
                        </template>
                        <template v-else>
                            <span>     {{ businessInfo.business.callerName}} </span>
                        </template>
                    </td>
                    <td class="td-title">客户姓名</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input id="customerName" placeholder="请输入客户姓名" type="text"
                                   v-model=" businessInfo.business.customerName"/>
                        </template>
                        <template v-else>
                            <span>     {{ businessInfo.business.customerName}} </span>
                        </template>
                    </td>
                    <td class="td-title">客户电话</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input placeholder="请输入客户电话" type="text"
                                   v-model=" businessInfo.business.customerTel"/>
                        </template>
                        <template v-else>
                            <span>        {{ businessInfo.business.customerTel}} </span>
                        </template>
                    </td>
                </tr>
                <tr>
                    <td class="td-title">来电人类型</td>
                    <td colspan="3" class="td-value"
                        :style="pageType == 'edit'?'padding-left: 6px !important;':''">


                        <template v-if="pageType == 'edit'">
                            <label style="width: 20%;float: left;" v-for="item in item.callerType">
                                <input name="customerType" type="radio" v-model="businessInfo.business.callerType"
                                       :value="item.key" style="vertical-align: -4px;display: none"/>
                                <div v-if="businessInfo.business.callerType!=item.key" class="checkBoxToRadio">
                                </div>
                                <div v-else class="checkBoxToRadio">
                                    ✔
                                </div>
                                <span class="userName"
                                      style="text-align: justify !important; width: 52px !important;padding-left: 3px;float: left;margin-left: 14px;">{{item.value}}</span>
                            </label>
                        </template>


   <!--                     <template v-if="pageType == 'edit'">
                            <label style="width: 20%;float: left;" v-for="item in item.callerType">
                                <input name="customerType" type="radio"
                                       v-model="businessInfo.business.callerType"
                                       :value="item.key" style="vertical-align: -2px;"/>{{item.value}}
                            </label>
                        </template>
                        -->


                        <template v-else>
                            <span>   {{ getCallerType(businessInfo.business.callerType)}} </span>
                        </template>
                    </td>
                    <td class="td-title">所属区域</td>
                    <td colspan="3" class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input class="td-value selectModel" placeholder="请输入所属区域"
                                   v-model="businessInfo.business.customerArea"
                                   type="text"/>
                        </template>
                        <template v-else>
                            <span>   {{ businessInfo.business.customerArea}} </span>
                        </template>
                    </td>
                </tr>
                <tr>
                    <td class="td-title"><i class="biTian">*</i>来电内容登记</td>
                    <td colspan="7" class="td-value" style="height: 60px;">
                                     <textarea v-model=" businessInfo.business.businessContent"
                                               v-if="pageType == 'edit'"
                                               style="color: #2a8cec!important;line-height: 20px;padding-top: 0px !important;">
                                     </textarea>
                        <span v-else class="textareaSpan lineOne">   {{ businessInfo.business.businessContent}} </span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title"><i class="biTian">*</i>解决办法</td>
                    <td colspan="7" class="td-value" style="height: 60px;">
                                     <textarea v-if="pageType == 'edit'"
                                               style="color: #2a8cec!important;line-height: 20px;padding-top: 0px !important;"
                                               v-model="businessInfo.business.solveWay">
                                    </textarea>
                        <span v-else class="textareaSpan lineOne">  {{businessInfo.business.solveWay}} </span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title"><i class="biTian">*</i>受理部门</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <select v-model=" businessInfo.business.acceptDepartId" class="form-control">
                                <option value="" selected></option>
                                <option v-for="d in item.acceptDepart" v-bind:value="d.departId">
                                    {{d.departName}}({{d.companyName}})
                                </option>
                            </select>
                        </template>
                        <template v-else>
                            <span>    {{ businessInfo.business.acceptDepart}} </span>
                        </template>
                    </td>
                    <td class="td-title"><i class="biTian">*</i>受理责任人</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input id="acceptName" placeholder="请输入受理责任人姓名" type="text"
                                   v-model=" businessInfo.business.acceptName"
                                   :departId="businessInfo.business.acceptDepartId"/>
                        </template>
                        <template v-else>
                            <span>  {{ businessInfo.business.acceptName}} </span>
                        </template>
                    </td>
                    <td class="td-title"><i class="biTian">*</i>手机号码</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <input placeholder="请输入手机号码" type="text"
                                   v-model=" businessInfo.business.acceptTel"/>
                        </template>
                        <template v-else>
                            <span> {{ businessInfo.business.acceptTel}} </span>
                        </template>
                    </td>
                    <td class="td-title"><i class="biTian">*</i>发送短信</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <select v-model=" businessInfo.business.briefMes" class="form-control">
                                <option value="" selected></option>
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </template>
                        <template v-else>
                            <span> {{businessInfo.business.briefMes == 1?'是':'否'}}</span>
                        </template>
                    </td>
                </tr>
                <tr>
                    <td class="td-title">电话是否解决</td>
                    <td class="td-value">
                        <template v-if="pageType == 'edit'">
                            <select v-model=" businessInfo.business.haveSolve" class="form-control">
                                <option value="" selected></option>
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </template>
                        <template v-else>
                            <span>     {{businessInfo.business.haveSolve == 1?'是':'否'}}</span>
                        </template>
                    </td>
                    <td colspan="6"></td>
                </tr>
            </table>
        </template>
        <div style="padding: 10px 0;text-align:center;" v-if="pageType=='edit'">
            <input type="button" id="pass" class="btn oaBtn btn-sm" @click="save()" value="保存">
        </div>
    </div>

</section>
<!--JQ-->
<!--插件JS-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script>window.jQuery || document.write('<script src="/dist/plugins/jQuery/jquery-2.2.3.min.js"><\/script>', '<script src="/dist/plugins/bootstrap/js/bootstrap.min.js"><\/script>', '<script src="/dist/plugins/vue/vue.min.js"><\/script>')</script>
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script type="text/javascript">

    function refresh() {
        location.reload();
    }
</script>
<script src="enum.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                var width = $(this).outerWidth();
                if (width < 180) {
                    width = 180;
                }
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": width + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">


    var api = frameElement.api;
    $(function () {
        $("body").on("click", ".selectModel", function (e) {
            if ($(".model-picker-dropdown").is(":hidden")) {
                $(".model-picker-dropdown").css({
                    "width": $(this).outerWidth() + "px",
                    "left": $(this).offset().left,
                    "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            } else {
                $(".model-picker-dropdown").hide();
            }
        });
        $("body").on("click", ".model-select-tab a", function (e) {
            $(this).parent().find("a").removeClass("active");
            $(this).addClass("active");
            var boxName = $(this).attr("data-count");
            $(".model-select").hide();
            $(".model-select-content" + " ." + boxName).show();

        });
        $("body").on("click", ".model-select  a", function (e) {
            if ($(this).hasClass("active")) {
                return false;
            }
            $(this).parent().find("a").removeClass("active");
            var id = $(this).attr("attr-id");
            $(this).addClass("active");
            var val = $(this).text();
            if ($(this).parents(".model-select").hasClass("type")) {
                $(".model-select-tab a").removeClass("active");
                $(".model-select-tab a[data-count=brand]").addClass("active");
                $(".model-select").hide();
                app.provinceName = val;
                app.cityName = '';
                app.countyName = '';
                app.getCity(id);
                $(".model-select-content .brand").show();

            } else if ($(this).parents(".model-select").hasClass("brand")) {
                $(".model-select-tab a").removeClass("active");
                var id = $(this).attr("attr-id");
                $(".model-select-tab a[data-count=model]").addClass("active");
                $(".model-select").hide();
                app.cityName = val;
                app.countyName = '';
                app.getCounty(id);
                $(".model-select-content .model").show();

            } else {
                app.countyName = val;
                app.businessInfo.business.customerArea = app.provinceName + "-" + app.cityName + "-" + app.countyName
                $(".model-picker-dropdown").hide();
            }
        })
        $("body").on("click", ".model-picker-dropdown", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".model-picker-dropdown").hide();
        });

    });

    Vue.directive('onedate', {
        // 当被绑定的元素插入到 DOM 中时……
        update: function (el, binding) {
            // 聚焦元素
            if (app.pageType != 'add') {
                if (el.value == "NaN.undefined" || el.value == "") {
                    el.value = binding.value
                }
            }
        },
        componentUpdated: function (el, binding) {
            // 聚焦元素
        }
    })
    var app = new Vue({
        el: '#app',
        data: {
            type: $.wyui.page.urlParams.type,
            address: "",
            itemsBran: [],
            itemsType: [],
            itemsMod: [],
            provinceName: '',
            cityName: '',
            countyName: '',
            pageType: $.wyui.page.urlParams.pageType,
            item: {
                status: [],
                callerType: [],
                acceptDepart: [],
                acceptName: [],
                serveTypeOfService: [],
                serviceStation: [],
                /*  accpetor:[],*/
                deviceBrand: [],
                deviceType: [],
                deviceModel: [],
            },
            businessInfo: {
                business: {
                    id: '',
                    mainId: '',
                    businessNo: '',
                    businessType: '',
                    businessContent: '',
                    solveWay: '',
                    remark: '',
                    status: '',
                    createTime: '',
                    serialNo: '',
                    deviceBrand: '',
                    deviceType: '',
                    deviceModel: '',
                    acceptDepart: '',
                    acceptName: '',
                    acceptTel: '',
                    briefMes: '',
                    customerName: '',
                    customerTel: '',
                    customerArea: '',
                    callType: '',
                    serverStationId: '',
                    acceptId: '',
                    callerId: '',
                    customerId: '',
                    deviceTypeId: '',
                    deviceBrandId: '',
                    deviceModelId: '',
                    acceptDepartId: '',
                    createName: getCurrentUser().name,
                    createUserId: getCurrentUser().id,
                    haveSolve: '',
                    callerName:'',
                    callerTel:'',

                }
            },
        },
        methods: {

            save: function () {
                var that = this;
                if (that.type && that.type != '') {
                    if (that.type == 'machineConsultation') {
                        if (that.businessInfo.business.businessType == '') {
                            alert('业务类别不能为空！');
                            return;
                        }
                        if (that.businessInfo.business.businessContent == '') {
                            alert('内容详细不能为空！');
                            return;
                        }
                        if (that.businessInfo.business.acceptDepartId == '') {
                            alert('受理部门不能为空！');
                            return;
                        }
                        if (that.businessInfo.business.acceptName == '') {
                            alert('受理责任人不能为空！');
                            return;
                        }
                        if (!that.businessInfo.business.acceptTel || that.businessInfo.business.acceptTel.length < 11) {
                            alert('手机号码格式不正确！');
                            return false;
                        }
                    }
                    if (that.type == "accessoriesConsultation") {
                        if (that.businessInfo.business.businessType == '') {
                            alert('业务类别不能为空！');
                            return;
                        }
                        if (that.businessInfo.business.businessContent == '') {
                            alert('内容详细不能为空！');
                            return;
                        }
                        if (that.businessInfo.business.serverStationId == '') {
                            alert('指派服务站不能为空！');
                            return;
                        }
                        if (that.businessInfo.business.acceptId == '') {
                            alert('受理责任人不能为空！');
                            return;
                        }
                        if (!that.businessInfo.business.acceptTel || that.businessInfo.business.acceptTel.length < 11) {
                            alert('手机号码格式不正确！');
                            return false;
                        }
                    }
                    if (that.type == "other") {
                        if (that.businessInfo.business.businessContent == '') {
                            alert('来电内容登记不能为空！');
                            return;
                        }
                        if (that.businessInfo.business.solveWay == '') {
                            alert('解决办法不能为空！');
                            return;
                        }
                        if (that.businessInfo.business.acceptDepartId == '') {
                            alert('受理部门不能为空！');
                            return;
                        }
                        if (!that.businessInfo.business.acceptTel || that.businessInfo.business.acceptTel.length < 11) {
                            alert('手机号码格式不正确！');
                            return false;
                        }
                        if (!that.businessInfo.business.briefMes) {
                            alert('发送短信不能为空！');
                            return false;
                        }
                    }
                }

                delete that.businessInfo.business.createTime;
                that.businessInfo.business.callType = that.type;
                $.wyui.postMethod("/serveBusiness/save.json", trimRN(that.businessInfo), function (data) {

                    alert("保存成功！");
                    var $iframe = top.findIframeByName("400");
                    $iframe[0].contentWindow.$("#iframeBox")[0].contentWindow.app.getList();

                    var pageId = top.getActivePageId();
                    top.closeTabByPageId("zJpJQt");
                    top.closeTabByPageId(pageId);
                });
            },

            //根据枚举表类型获取枚举数据
            getEnumByModuleType: function (moduleType, key) {
                var that = this;
                $.wyui.postMethod("/serveEnum/getEnumByModuleType.json", {moduleType: moduleType}, function (data) {
                    that.item[key] = data;
                });
            },
            getTelById: function (type) {
                var that = this;
                if(type) {
                    that.businessInfo.business.acceptTel = '';
                }
                if (that.businessInfo.business.acceptId&&that.businessInfo.business.acceptId!='') {
                    $.wyui.postMethod('/user/getById.json', {'userId': that.businessInfo.business.acceptId}, function (r) {
                        that.businessInfo.business.acceptTel = r.tel;
                    })
                }
            },
            //获取设备信息下拉
            getDeviceBrand: function () {
                var that = this;
                $.wyui.postMethod("/deviceBrand/getBrandPage2.json", {}, function (data) {
                    that.item.deviceBrand = data.records;
                    that.getDeviceType(that.businessInfo.business.deviceBrandId);
                });
            },
            getDeviceType: function (id,type) {
                var that = this;
                if(type){
                    that.businessInfo.business.deviceType='';
                    that.businessInfo.business.deviceTypeId='';
                    that.businessInfo.business.deviceModel='';
                    that.businessInfo.business.deviceModelId='';
                }
                if (id && id != '') {
                    $.wyui.postMethod("/deviceBrand/getDeviceTypeList.json", {brandId: id}, function (data) {
                        that.item.deviceType = data.devicetypes;
                        that.getDeviceModel();
                    });
                }
            },
            getDeviceModel: function (type) {
                var that = this;
                if(type){
                    that.businessInfo.business.deviceModel='';
                    that.businessInfo.business.deviceModelId='';
                }
                if (that.businessInfo.business.deviceBrandId && that.businessInfo.business.deviceBrandId != ''
                    && that.businessInfo.business.deviceTypeId && that.businessInfo.business.deviceTypeId != '') {
                    $.wyui.postMethod("/deviceModel/getModelListByBrandId.json", {
                        brandId: that.businessInfo.business.deviceBrandId,
                        deviceTypeId: that.businessInfo.business.deviceTypeId,
                    }, function (data) {
                        that.item.deviceModel = data.models;
                    });
                }

            },
            //省市三级联动
            getCity: function (id) {
                var that = this;
                that.cityId = "市区";
                that.countyId = "县";
                that.itemsMod = "";
                var data = {};
                $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': id}, function (r) {
                    that.itemsBran = r.records;
                })
            },
            getCounty: function (id) {
                var that = this;
                $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': id}, function (r) {
                    that.itemsMod = r.records;
                })

            },
            inputFocus: function (id) {
                $("#" + id).focus();
            },
            //页面展示省市三级联动信息
            showDz: function () {
                var html = '';
                if (this.provinceName) {
                    html += this.provinceName;
                }
                if (this.cityName != '') {
                    html += "-" + this.cityName;
                }
                if (this.countyName != '') {
                    html += "-" + this.countyName;
                }
                //this.repairInfo.device.siteLocation = html;
                return html;
            },
            getDepart: function () {
                var that = this;
                $.wyui.postMethod("/serveStation/getDepart.json", {
                    companyId: ""
                }, function (data) {
                    that.item.acceptDepart = data.result;

                    setTimeout(function () {
                        getServe()
                    }, 1000);
                });
            },
            //获取服务站信息下拉
            getServiceStation: function () {
                var that = this;
                $.wyui.postMethod("/serveStation/getServeStationList.json", {}, function (data) {
                    that.item.serviceStation = data.records;
                    that.getAcceptName();
                });
            },
            //获取受理人下拉
            getAcceptName: function (type) {
                var that = this;
                if(type) {
                    that.businessInfo.business.acceptName = '';
                    that.businessInfo.business.acceptTel = '';
                    that.businessInfo.business.acceptId = '';
                }
                if (that.businessInfo.business.serverStationId) {
                    $.wyui.postMethod("/serveStation/getServeStationAcceptorList.json", {
                        'stationId': that.businessInfo.business.serverStationId,
                        'companyId': ''
                    }, function (data) {
                        that.item.acceptName = data.records;
                    });
                }
            },
            setAcceptTel: function () {
                var that = this;
                for (var i = 0; i < that.item.acceptName.length; i++) {
                    if (that.item.acceptName[i].userName == that.businessInfo.main.acceptName) {
                        that.businessInfo.main.acceptTel = that.item.acceptName[i].tel;
                    }
                }
            },
        },
        mounted: function () {
            var that = this;
            if (that.pageType == "look") {
                $.wyui.postMethod("/serveBusiness/getBusinessObjectById.json", {
                    type: $.wyui.page.urlParams.type,
                    id: $.wyui.page.urlParams.id
                }, function (data) {
                    // that.splitData(data);
                    that.businessInfo.business.id = data.businessId;

                    that.businessInfo.business = data;

                    if (that.type == 'machineConsultation' || that.type == 'other') {
                        that.getDepart();
                    } else if (that.type == 'accessoriesConsultation') {
                        that.getServiceStation();
                    }
                });
            } else if (that.pageType == "edit") {
                /*获取省份*/
                $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': '0'}, function (r) {
                    that.itemsType = r.records;
                });
                that.getEnumByModuleType('serveConsultStatus', 'status');
                that.getEnumByModuleType('callerType', 'callerType');
                that.getEnumByModuleType('serveTypeOfService', 'serveTypeOfService');


                that.businessInfo.business.createUserName = getCurrentUser().name;
                that.businessInfo.business.createUserId = getCurrentUser().id;

                if ($.wyui.page.urlParams.id && $.wyui.page.urlParams.id != 0) {
                    //查看和修改要获取初始数据
                    $.wyui.postMethod("/serveBusiness/getBusinessObjectById.json", {
                        type: $.wyui.page.urlParams.type,
                        id: $.wyui.page.urlParams.id
                    }, function (data) {
                        //数据处理
                        that.businessInfo.business = data;
                        that.businessInfo.business.id = data.businessId;
                        that.getDeviceBrand();
                        if (that.type == 'machineConsultation' || that.type == 'other') {
                            that.getDepart();
                        } else if (that.type == 'accessoriesConsultation') {
                            that.getServiceStation();
                        }
                        //that.splitData(data);
                        if (that.businessInfo.business.status &&
                            (that.businessInfo.business.status == 'done' || that.businessInfo.business.status == 'shut' || that.businessInfo.business.status == 'revoke')) {
                            that.pageType = 'look';
                        }
                    });
                } else {
                    if (that.type == 'machineConsultation' || that.type == 'other') {
                        that.getDepart();
                    } else if (that.type == 'accessoriesConsultation') {
                        that.getServiceStation();
                    }
                    that.getDeviceBrand();
                }




            }
            setTimeout(function () {
                getServe()
            }, 1000);
        }

    })
</script>

<script>
    $(function () {
        getServe();
    });

    function getServe() {
        console.log(app.businessInfo.business.acceptDepartId)
        //客户姓名
        $("#customerName").autoComplete({
            url: server.ip + "/serveUser/getServeUserInfoTop10.json",
            render: function (data, panel) {
                data = data.sendData;
                for (var i = 0; i < data.length; i++) {
                    $("<li></li>").data("autoComplete",
                        data[i]).html("<a>" + data[i].customerName + "(" + data[i].customerTel + ")</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                app.businessInfo.business.customerName = user.customerName;
                app.businessInfo.business.customerTel = user.customerTel;
                app.businessInfo.business.customerId = user.customerId;
                return false;
            },
            height: 210,
            width: 300
        });

        $("#callerTel").autoComplete({
            url: server.ip + "/serveUser/getServeUserInfoTop10ByCallerTel.json",
            render: function (data, panel) {
                data = data.sendData;
                for (var i = 0; i < data.length; i++) {
                    $("<li></li>").data("autoComplete",
                        data[i]).html("<a>" + data[i].callerName + "(" + data[i].callerTel + ")</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                app.businessInfo.business.callerName = user.callerName;
                app.businessInfo.business.callerTel = user.callerTel;
                app.businessInfo.business.callerId = user.callerId;
                return false;
            },
            height: 210,
            width: 300
        });

        $("#callerName").autoComplete({
            url: server.ip + "/serveUser/getServeUserInfoTop10ByCallerName.json",
            render: function (data, panel) {
                data = data.sendData;
                for (var i = 0; i < data.length; i++) {
                    $("<li></li>").data("autoComplete",
                        data[i]).html("<a>" + data[i].callerName + "(" + data[i].callerTel + ")</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                app.businessInfo.business.callerName = user.callerName;
                app.businessInfo.business.callerTel = user.callerTel;
                app.businessInfo.business.callerId = user.callerId;
                return false;
            },
            height: 210,
            width: 300
        });

        $("#acceptName").autoComplete({
            url: server.ip + "/serveUser/getResponsiblePersonByDepartId.json",
            render: function (data, panel) {
                data = data.sendData;
                for (var i = 0; i < data.length; i++) {
                    $("<li></li>").data("autoComplete",
                        data[i]).html("<a>" + data[i].name + "(" + data[i].tel + ")</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                app.businessInfo.business.acceptId = user.id;
                app.businessInfo.business.acceptName = user.name;
                app.businessInfo.business.acceptTel = user.tel;
                return false;
            },
            height: 210,
            width: 300
        });

    };
</script>
</body>
</html>